<template>
  <div>
    <el-dialog :title="title" v-model="visible" width="1560px" draggable overflow>
      <el-form ref="formRef" :model="formData" label-position="right" label-width="100px">
        <div class="form-layout">
          <div class="left-section">
            <el-form-item label="托管网贷资料" prop="onlineLendingInfo" class="info-textarea">
              <el-input
                type="textarea"
                v-model="formData.onlineLendingInfo"
                :rows="25"
                resize="none"
                class="info-input"
              />
            </el-form-item>
          </div>
          <div class="middel-section">
            <el-form-item label="籍贯" prop="nativePlace">
              <el-input v-model="formData.nativePlace"/>
            </el-form-item>
            <el-form-item label="客户主观意愿" prop="trusteeshipMemo">
              <el-input v-model="formData.trusteeshipMemo"/>
            </el-form-item>
            <el-form-item label="身份证号" prop="identityCard">
              <el-input v-model="formData.identityCard"/>
            </el-form-item>
            <el-form-item label="地址" prop="identityAddress">
              <el-input v-model="formData.identityAddress"/>
            </el-form-item>
            <el-form-item label="预留手机号" prop="identityPhone">
              <el-input v-model="formData.identityPhone"/>
            </el-form-item>
            <el-form-item label="转接类型" prop="transferType">
              <el-input v-model="formData.transferType"/>
            </el-form-item>
            <el-form-item label="平台密码" prop="platPassword">
              <el-input v-model="formData.platPassword"/>
            </el-form-item>
          </div>
          <div class="right-section">
            <el-form-item :label="labelName" prop="info" class="info-textarea">
              <el-input 
                type="textarea" 
                v-model="formData.info"
                :rows="25"
                resize="none"
                class="info-input"
              />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button style="height:66px;font-size: 66px" @click="visible = false">取 消</el-button>
          <el-button style="height:66px;font-size: 66px" type="primary" @click="updateNativePlaceHandle">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
const visible = ref(false)
const formRef = ref()
const formData = ref({
  nativePlace: '',
  trusteeshipMemo: '',
  identityCard: '',
  identityAddress: '',
  identityPhone: '',
  transferType: '',
  platPassword: '',
  info: ''
})

const rowDataCopy = ref({})

const labelName = ref('')

import request from '@/config/axios'
const emit = defineEmits(["ok"])
const updateNativePlaceHandle = async function () {
  await request.post({
    url: '/trusteeshipDetail/updateNativePlaceHandleAndInfo',
    data: {...formData.value, id: rowDataCopy.value.tgDtlId, orderId: rowDataCopy.value.orderId}
  })
  visible.value = false
  emit("ok")
}

const title = ref('')
defineExpose({
  edit: (rowData) => {
    console.log('---身份信息----',rowData)
    visible.value = true
    formData.value.nativePlace = rowData.nativePlace
    formData.value.trusteeshipMemo = rowData.trusteeshipMemo
    formData.value.identityCard = rowData.identityCard
    formData.value.identityAddress = rowData.identityAddress
    formData.value.identityPhone = rowData.identityPhone
    formData.value.transferType = rowData.transferType
    formData.value.platPassword = rowData.platPassword
    formData.value.info = rowData.info || ''
    formData.value.onlineLendingInfo = rowData.onlineLendingInfo || ''
    rowDataCopy.value = rowData
    title.value = rowData.customName
    labelName.value = rowData.platform + '平台资料'
  }
})
</script>

<style scoped>
.form-layout {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.left-section {
  flex: 2;
  min-width: 300px;
}

.middel-section {
  flex: 1;
  min-width: 300px;
}

.right-section {
  flex: 2;
  min-width: 400px;
}

.info-textarea {
  height: 100%;
}

.info-textarea :deep(.el-form-item__content) {
  height: 100%;
}

.info-input {
  width: 100%;
  height: 100%;
}

:deep(.el-form-item) {
  margin-bottom: 18px;
}

:deep(.el-textarea__inner) {
  min-height: 200px !important;
  font-size: 14px;
  line-height: 1.5;
}
</style>
